<template>
  <div class="app-container" :class="{ 'footer-visible': footerVisible }">
    <header class="app-header">
      <h1 contenteditable="true" @blur="updateTitle" ref="titleRef">{{ title }}</h1>
      
      <!-- 添加控制DocSidebar的按钮 -->
      <div class="doc-toggle-btn" @click="toggleRightSidebar" title="显示/隐藏文档面板">
        <el-icon><Document /></el-icon>
      </div>
    </header>
    <div class="app-content">
      <!-- 侧边栏切换按钮 -->
      <div class="sidebar-toggle" @click="toggleSidebar">
        <el-icon><component :is="sidebarVisible ? 'ArrowLeft' : 'ArrowRight'"></component></el-icon>
      </div>
      
      <!-- 侧边栏 -->
      <aside class="app-sidebar" :class="{ 'sidebar-collapsed': !sidebarVisible }">
        <div class="sidebar-title">工具栏</div>
        <ul class="sidebar-menu">
          <li v-for="(item, index) in sidebarItems" :key="index" 
              @click="selectSidebarItem(item)"
              :class="{'active': activeItem === item.name}">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </aside>
      <main class="app-main" :class="{ 'main-expanded': !sidebarVisible, 'right-sidebar-visible': rightSidebarVisible }">
        <router-view />
      </main>
      
      <!-- 右侧文档栏 -->
      <aside class="right-sidebar" :class="{ 'right-sidebar-hidden': !rightSidebarVisible }">
        <div class="right-sidebar-toggle" @click="toggleRightSidebar">
          <el-icon><component :is="rightSidebarVisible ? 'ArrowRight' : 'ArrowLeft'"></component></el-icon>
        </div>
        <doc-sidebar />
      </aside>
    </div>
    
    <!-- 底部工具栏切换按钮 -->
    <div class="footer-toggle" @click="toggleFooter">
      <el-icon><component :is="footerVisible ? 'ArrowDown' : 'ArrowUp'"></component></el-icon>
    </div>
    
    <!-- 底部工具栏 -->
    <footer class="app-footer" :class="{ 'footer-collapsed': !footerVisible }">
      <div class="footer-title">常用工具组件</div>
      <div class="trash-actions">
        <div class="add-agent" @click="addAgentComponent">
          <el-icon><Plus /></el-icon>
          <span>常用工具管理</span>
        </div>
      </div>

      <div class="quick-tools-section">
        <div class="section-divider">
          <span class="divider-line"></span>
          <span class="divider-text">智能体组件</span>
          <span class="divider-line"></span>
        </div>
        <draggable 
          v-model="quickTools" 
          class="quick-tools-container"
          group="quickTools"
          @end="onDragEnd"
          item-key="id"
        >
          <template #item="{ element }">
            <div 
              class="quick-tool-item" 
              :data-id="element.id"
              draggable="true"
              @dragstart="dragQuickTool($event, element)"
            >
              <el-icon><component :is="element.icon"></component></el-icon>
              <span>{{ element.name }}</span>
            </div>
          </template>
        </draggable>
      </div>


      <div class="quick-tools-section">
        <div class="section-divider">
          <span class="divider-line"></span>
          <span class="divider-text">MCP组件</span>
          <span class="divider-line"></span>
        </div>
        <draggable 
          v-model="MCPTools" 
          class="mcp-tools-container"
          group="MCPTools"
          @end="onDragEnd"
          item-key="id"
        >
          <template #item="{ element }">
            <div 
              class="quick-tool-item" 
              :data-id="element.id"
              draggable="true"
              @dragstart="dragMCPTool($event, element)"
            >
              <el-icon><component :is="element.icon"></component></el-icon>
              <span>{{ element.name }}</span>
            </div>
          </template>
        </draggable>
      </div>

      <div class="quick-tools-section">
        <div class="section-divider">
          <span class="divider-line"></span>
          <span class="divider-text">工作流组件</span>
          <span class="divider-line"></span>
        </div>
        <draggable 
          v-model="workflowComponents" 
          class="workflow-container"
          group="workflowComponents"
          @end="onWorkflowDragEnd"
          item-key="id"
        >
          <template #item="{ element }">
            <div
              class="workflow-card"
              draggable="true"
              @dragstart="dragWorkflow($event, element)"
            >
              <div class="workflow-icon">
                <el-icon><component :is="element.icon"></component></el-icon>
              </div>
              <div class="workflow-info">
                <div class="workflow-name">{{ element.name }}</div>
                <div class="workflow-desc" v-if="element.description">{{ element.description }}</div>
              </div>
            </div>
          </template>
        </draggable>
      </div>
      
    
    </footer>
    <ToolsManagementDialog
      v-model:visible="toolsManagementVisible"
      :quick-tools="quickTools"
      :mcp-tools="MCPTools"
      :workflow-components="workflowComponents"
      @add="(payload) => handleToolsManagement('add', payload)"
      @edit="(payload) => handleToolsManagement('edit', payload)"
      @delete="(payload) => handleToolsManagement('delete', payload)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { Delete, Plus, Document } from '@element-plus/icons-vue';
import draggable from 'vuedraggable';
import type { ComponentPublicInstance } from 'vue';
import { useRouter } from 'vue-router';
import ToolsManagementDialog from './components/ToolsManagementDialog.vue'
import { ElMessage } from 'element-plus';
import DocSidebar from '@/components/universalDoc/DocSidebar.vue';
import store from '@/store/index.ts';

interface SidebarItem {
  name: string;
  icon: string;
  route?: string;
}

interface QuickTool {
  id: string;
  name: string;
  icon: string;
  description: string;
}

interface WorkflowComponent {
  id: string;
  name: string;
  icon: string;
  description?: string;
}

interface MCPTool {
  id: string;
  name: string;
  icon: string;
  description: string;
  type: string;
}

const title = ref('WendAIWeb');
const titleRef = ref<ComponentPublicInstance | null>(null);
const activeItem = ref('智能体管理');
const sidebarVisible = ref(false);
const footerVisible = ref(false);
const router = useRouter();
const toolsManagementVisible = ref(false);

// 使用Vuex store
const rightSidebarVisible = computed(() => store.state.rightSidebarVisible);

// 监听布局变化，可以在这里添加额外的逻辑
watch([sidebarVisible, footerVisible], () => {
  // 延迟一点执行，确保DOM已更新
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
  }, 300);
});

const sidebarItems = ref<SidebarItem[]>([
  { name: 'AI对话', icon: 'ChatDotRound', route: '/chat' },
  { name: '万能文档', icon: 'Setting', route: '/universal-config' },
  { name: '记忆管理', icon: 'Memo' },
  { name: '智能体管理', icon: 'Avatar', route: '/agent-management' },
  { name: 'MCP接入', icon: 'Connection', route: '/mcp-agent-directory' },
  { name: '工作流管理', icon: 'Tools' }
]);

const quickTools = ref<QuickTool[]>([]);
const MCPTools = ref<MCPTool[]>([]);
const workflowComponents = ref<WorkflowComponent[]>([]);

// 获取所有工具列表
const fetchAllTools = async () => {
  try {
    const response = await fetch(`api/common/tools/list`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    
    // 更新所有工具数据
    quickTools.value = data.quickTools || [];
    MCPTools.value = data.MCPTools || [];
    workflowComponents.value = data.workflowComponents || [];
  } catch (error) {
    console.error('Failed to fetch tools:', error);
  }
};

const updateTitle = (): void => {
  if (titleRef.value && titleRef.value.$el) {
    title.value = titleRef.value.$el.textContent || 'WendAIWeb';
  }
};

const selectSidebarItem = (item: SidebarItem): void => {
  console.log('选择了侧边栏项目:', item.name);
  activeItem.value = item.name;
  // 如果有定义路由，则进行导航
  if (item.route) {
    router.push(item.route);
  }
};

const toggleSidebar = () => {
  sidebarVisible.value = !sidebarVisible.value;
};

const toggleFooter = () => {
  footerVisible.value = !footerVisible.value;
};

const toggleRightSidebar = () => {
  store.dispatch('toggleRightSidebar');
};

const onDragEnd = (evt: any): void => {
  console.log('拖拽结束:', evt);
  // 可以在这里保存新的排序到后端
};

// 为拖拽项添加数据传输
const onDragStart = (evt: DragEvent, itemId: string): void => {
  if (evt.dataTransfer) {
    evt.dataTransfer.setData('text/plain', itemId);
  }
};


// 添加新的智能体组件
const addAgentComponent = () => {
  toolsManagementVisible.value = true
}

// 为工作流组件添加拖拽事件
const dragWorkflow = (event: DragEvent, workflow: WorkflowComponent): void => {
  if (event.dataTransfer) {
    console.log('设置工作流拖拽数据:', workflow);
    // 设置标准MIME类型
    event.dataTransfer.setData('text/plain', JSON.stringify(workflow));
    // 设置自定义MIME类型
    event.dataTransfer.setData('application/workflow', JSON.stringify(workflow));
    event.dataTransfer.effectAllowed = 'copy';
  }
};

const onWorkflowDragEnd = (evt: any): void => {
  console.log('工作流拖拽结束:', evt);
  // 可以在这里保存新的排序到后端
};

// 为quickTool添加拖拽事件
const dragQuickTool = (event: DragEvent, tool: QuickTool): void => {
  if (event.dataTransfer) {
    console.log('设置工具拖拽数据:', tool);
    // 设置标准MIME类型
    event.dataTransfer.setData('text/plain', JSON.stringify(tool));
    // 设置自定义MIME类型
    event.dataTransfer.setData('application/quick-tool', JSON.stringify(tool));
    event.dataTransfer.effectAllowed = 'copy';
  }
};

// 为MCPTool添加拖拽事件
const dragMCPTool = (event: DragEvent, tool: MCPTool): void => {
  if (event.dataTransfer) {
    console.log('设置MCP拖拽数据:', tool);
    // 设置标准MIME类型
    event.dataTransfer.setData('text/plain', JSON.stringify(tool));
    // 设置自定义MIME类型
    event.dataTransfer.setData('application/mcp-tool', JSON.stringify(tool));
    event.dataTransfer.effectAllowed = 'copy';
  }
};

const handleToolsManagement = (action: string, payload: any) => {
  console.log('handleToolsManagement:', action, payload)
  switch (action) {
    case 'add':
      // 处理添加逻辑
      if (payload.type === 'quickTools') {
        // 处理从 toolsConfig.json 获取的数据
        const newTool = {
          id: `agent-${Date.now()}`,
          name: payload.data.name,
          icon: 'DocumentCopy',
          description: payload.data.description
        }
        quickTools.value.push(newTool)
      } else if (payload.type === 'MCPTools') {
        console.log('Adding MCP tool:', payload.data)
        // 确保 MCPTools 数组存在
        if (!MCPTools.value) {
          MCPTools.value = []
        }
        // 添加新的 MCP 工具
        MCPTools.value.push(payload.data)
        console.log('MCPTools after adding:', MCPTools.value)
        ElMessage.success('MCP组件添加成功')
      } else if (payload.type === 'workflowComponents') {
        workflowComponents.value.push(payload.data)
      }
      break
    case 'edit':
      // 处理编辑逻辑
      if (payload.type === 'quickTools') {
        const index = quickTools.value.findIndex(tool => tool.id === payload.data.id)
        if (index !== -1) {
          quickTools.value[index] = { ...quickTools.value[index], ...payload.data }
        }
      } else if (payload.type === 'MCPTools') {
        const index = MCPTools.value.findIndex(tool => tool.id === payload.data.id)
        if (index !== -1) {
          MCPTools.value[index] = { ...MCPTools.value[index], ...payload.data }
        }
      } else if (payload.type === 'workflowComponents') {
        const index = workflowComponents.value.findIndex(comp => comp.id === payload.data.id)
        if (index !== -1) {
          workflowComponents.value[index] = { ...workflowComponents.value[index], ...payload.data }
        }
      }
      break
    case 'delete':
      // 处理删除逻辑
      if (payload.type === 'quickTools') {
        quickTools.value = quickTools.value.filter(tool => tool.id !== payload.data.id)
      } else if (payload.type === 'MCPTools') {
        MCPTools.value = MCPTools.value.filter(tool => tool.id !== payload.data.id)
      } else if (payload.type === 'workflowComponents') {
        workflowComponents.value = workflowComponents.value.filter(comp => comp.id !== payload.data.id)
      }
      break
  }
}

onMounted(() => {
  fetchAllTools();
  // 为每个快捷工具项添加拖拽开始事件
  document.querySelectorAll('.quick-tool-item').forEach(el => {
    el.addEventListener('dragstart', (evt) => {
      const itemId = el.getAttribute('data-id');
      if (itemId) {
        onDragStart(evt as DragEvent, itemId);
      }
    });
  });
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f0f2f5;
  position: relative;
  box-sizing: border-box; /* 确保包括padding和border在内 */
}

/* 为了正确控制侧边栏折叠状态 */
.app-container:not(.sidebar-collapsed) {
  overflow-x: hidden;
}

.app-header {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  height: 70px; /* 固定header高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止header被压缩 */
  position: relative; /* 允许绝对定位子元素 */
}

.app-header h1 {
  margin: 0;
  cursor: text;
  outline: none;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.app-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  width: 100%;
  position: relative;
  transition: all 0.3s ease-in-out;
  height: calc(100vh - 70px); /* 计算内容区域高度 */
  margin-bottom: 0; /* 默认底部无边距 */
}

/* 底部栏可见时调整内容区域 */
.footer-visible .app-content {
  height: calc(100vh - 70px - 300px); /* 当底部栏可见时减少高度 */
  margin-bottom: 300px; /* 为底部栏留出空间 */
}

/* 侧边栏切换按钮 */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  width: 24px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 20;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.sidebar-toggle:hover {
  width: 30px;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.3);
}

/* 底部工具栏切换按钮 */
.footer-toggle {
  position: fixed; /* 改为fixed定位 */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  width: 80px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.footer-toggle:hover {
  height: 30px;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.3);
}

.app-sidebar {
  width: 220px;
  background: linear-gradient(180deg, #1E293B 0%, #334155 100%);
  color: white;
  padding: 1.2rem 1rem;
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  z-index: 10;
  height: 100%;
  position: relative; /* 改回相对定位 */
}

.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-track {
  background-color: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 92, 246, 0.5);
}

.sidebar-collapsed {
  transform: translateX(-100%);
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app-main {
  flex: 1;
  padding: 1.2rem;
  overflow-y: auto;
  background-color: #F8FAFC;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
  position: relative;
  width: calc(100% - 220px); /* 默认宽度，考虑侧边栏 */
  margin-left: 220px; /* 为侧边栏留出空间 */
  height: 100%;
  box-sizing: border-box; /* 确保padding包含在宽高计算中 */
}

.app-main::-webkit-scrollbar {
  width: 6px;
}

.app-main::-webkit-scrollbar-track {
  background-color: transparent;
}

.app-main::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.app-main::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 92, 246, 0.5);
}

/* 侧边栏隐藏时，主内容区域扩展 */
.main-expanded {
  width: 100% !important;
  margin-left: 0 !important;
}

.app-footer {
  background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 100%);
  padding: 1rem 1.5rem;
  border-top: 1px solid #E5E7EB;
  position: fixed; /* 使用fixed定位 */
  bottom: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 10;
  height: 300px; /* 底部栏高度 */
  overflow-y: auto; /* 内容过多时允许滚动 */
  transform: translateY(0); /* 默认显示 */
}

.app-footer::-webkit-scrollbar {
  width: 6px;
}

.app-footer::-webkit-scrollbar-track {
  background-color: transparent;
}

.app-footer::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.app-footer::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 92, 246, 0.5);
}

.footer-collapsed {
  transform: translateY(100%); /* 向下移出视口 */
}

.footer-title {
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
  color: #475569;
}

.quick-tools-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
  max-height: 150px;
  overflow-y: auto;
}

.quick-tools-container::-webkit-scrollbar {
  width: 6px;
}

.quick-tools-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.quick-tools-container::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.quick-tools-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 92, 246, 0.5);
}

.quick-tool-item {
  display: flex;
  align-items: center;
  padding: 0.7rem 1.2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  cursor: move;
  user-select: none;
  transition: all 0.2s ease;
  border-left: 3px solid #8B5CF6;
  min-width: 120px;
  flex: 1 0 calc(25% - 0.8rem); /* 每行4个，考虑到gap的大小 */
  max-width: calc(25% - 0.8rem);
}

.quick-tool-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quick-tool-item .el-icon {
  margin-right: 0.7rem;
  color: #6366F1;
  font-size: 1.1rem;
}

.trash-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  position: absolute;
  top: 1rem;
  right: 1.5rem;
}

.trash-zone {
  position: relative;
  top: 0;
  right: 0;
  width: auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  background-color: #FEE2E2;
  border: 2px dashed #EF4444;
  border-radius: 8px;
  color: #B91C1C;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trash-zone:hover {
  background-color: #FECACA;
  transform: scale(1.01);
}

.add-workflow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  background-color: #E0F2FE;
  border: 2px dashed #3B82F6;
  border-radius: 8px;
  color: #1D4ED8;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  cursor: pointer;
}

.add-workflow:hover {
  background-color: #BFDBFE;
  transform: scale(1.01);
}

.add-agent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  background-color: #F0E7FF;  /* 更柔和的紫色背景 */
  border: 2px dashed #9333EA;  /* 更鲜明的紫色边框 */
  border-radius: 8px;
  color: #7E22CE;  /* 深紫色文字，提高可读性 */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.1);  /* 紫色阴影 */
  min-width: 140px;
  cursor: pointer;
}

.add-agent:hover {
  background-color: #F3E8FF;  /* 悬停时略微变亮 */
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);  /* 增强阴影效果 */
}

.add-mcp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  background-color: #D1FAE5;
  border: 2px dashed #10B981;
  border-radius: 8px;
  color: #047857;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  cursor: pointer;
}

.add-mcp:hover {
  background-color: #A7F3D0;
  transform: scale(1.01);
}

.trash-zone .el-icon,
.add-workflow .el-icon,
.add-mcp .el-icon {
  margin-right: 0.7rem;
  font-size: 1.2rem;
}

.quick-tools-section {
  margin-bottom: 1.5rem;
}

.section-divider {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #CBD5E1, transparent);
}

.divider-text {
  padding: 0 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.sidebar-title {
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  font-weight: bold;
  color: #94A3B8;
  padding-left: 0.5rem;
  border-left: 3px solid #8B5CF6;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  padding: 0.85rem 0.7rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  border-left: 3px solid transparent;
}

.sidebar-menu li:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateX(3px);
}

.sidebar-menu li.active {
  background-color: rgba(139, 92, 246, 0.2);
  border-left: 3px solid #8B5CF6;
}

.sidebar-menu li .el-icon {
  margin-right: 0.7rem;
  font-size: 1.2rem;
  color: #94A3B8;
}

.sidebar-menu li.active .el-icon {
  color: #8B5CF6;
}

/* 确保app-main内部的router-view占满空间 */
.app-main > :deep(router-view) {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

/* 当底部栏隐藏时，内容区域扩展高度 */
.app-container:not(.footer-visible) .app-content {
  height: calc(100vh - 70px) !important;
  margin-bottom: 0 !important;
}

.workflow-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
  max-height: 200px;
  overflow-y: auto;
}

.workflow-container::-webkit-scrollbar {
  width: 6px;
}

.workflow-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.workflow-container::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.workflow-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(139, 92, 246, 0.5);
}

.workflow-card {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  border-left: 3px solid #3B82F6;
  min-width: 200px;
  flex: 1 0 calc(33.33% - 1rem);
  max-width: calc(33.33% - 1rem);
}

.workflow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #F0F9FF;
}

.workflow-card:active {
  cursor: grabbing;
}

.workflow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  color: white;
  margin-right: 0.8rem;
  flex-shrink: 0;
}

.workflow-icon .el-icon {
  font-size: 1.2rem;
}

.workflow-info {
  flex: 1;
  overflow: hidden;
}

.workflow-name {
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-desc {
  font-size: 0.8rem;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcp-tools-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
  max-height: 150px;
  overflow-y: auto;
}

.mcp-tools-container::-webkit-scrollbar {
  width: 6px;
}

.mcp-tools-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.mcp-tools-container::-webkit-scrollbar-thumb {
  background-color: rgba(16, 185, 129, 0.3);
  border-radius: 3px;
}

.mcp-tools-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(16, 185, 129, 0.5);
}

/* 右侧栏样式 */
.right-sidebar {
  position: fixed;
  top: 70px; /* 与顶部栏高度保持一致 */
  right: 0;
  width: 320px;
  height: calc(100vh - 70px);
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  overflow-y: auto;
  border-left: 1px solid #eee;
}

.right-sidebar-hidden {
  transform: translateX(100%);
}

.right-sidebar-toggle {
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
  z-index: 999;
  transition: all 0.2s ease;
}

.right-sidebar-toggle:hover {
  width: 28px;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
}

.app-main.right-sidebar-visible {
  margin-right: 320px;
  width: calc(100% - 320px); /* 确保宽度计算正确 */
  transition: all 0.3s ease-in-out;
}

/* 当右侧栏隐藏时，恢复主内容区域的宽度 */
.app-main:not(.right-sidebar-visible) {
  margin-right: 0;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

/* 文档切换按钮样式 */
.doc-toggle-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.doc-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.doc-toggle-btn .el-icon {
  font-size: 18px;
}
</style>
